<template>
    <div>
            <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>动态管理</el-breadcrumb-item>
            </el-breadcrumb>

            <el-form :inline="true" model="" class="user-search">
                <el-form-item label="搜索：">
                    <el-input size="small" placeholder="输入标题" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input size="small"  placeholder="输入动态内容" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select size="small"  placeholder="请选择审核状态" clearable>
                        <el-option  label="待审核" value="0" ></el-option>
                        <el-option  label="已审核" value="1" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select size="small"  placeholder="请选择动态类型" clearable>
                        <el-option  label="娱乐" value="1" ></el-option>
                        <el-option  label="新闻" value="2" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" @click="search">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>

                <el-table-column
                label="名称"
                width="120">
                <template slot-scope="scope">{{scope.row.releaseName}}</template>
                </el-table-column>

                <el-table-column
                prop="releasePerson"
                label="发布人"
                width="120">
                </el-table-column>
                <el-table-column
                prop="releaseTime"
                label="创建时间"
                width="180"
                >
                </el-table-column>
                <el-table-column
                label="审核状态"
                width="120"
                >
                    <template slot-scope="scope">{{scope.row.releaseReviewStatus=='1'?'已审核':'待审核'}}</template>
                </el-table-column>
                <el-table-column
                prop="releaseReviewer"
                label="审核人"
                width="120"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="releaseType"
                label="活动类型"
                width="120"
                show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small" @click="approval(scope.row)">编辑</el-button>
                </template>
                </el-table-column>
            </el-table>
            <Page v-bind:child-msg="pageparm" @callFather="callFather"></Page>

            <!-- Form -->

            <el-dialog title="审批" :visible.sync="dialogForm" width="30%">
                <el-form :model="form">
                    <el-form-item label="活动名称" label-width="120">
                        <el-col span="14">
                            <el-input v-model="form.releaseName"  ></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="审批状态" label-width="120">
                    <el-select v-model="form.releaseReviewStatus" placeholder="请选择审批状态">
                        <el-option label="通过" value="1"></el-option>
                        <el-option label="未通过" value="0"></el-option>
                    </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogForm = false">取 消</el-button>
                    <el-button type="primary" @click="dialogForm = false">确 定</el-button>
                </div>
            </el-dialog>
    </div>
</template>
<script>
    import Page from "../../components/Pagination.vue";
    export default {
        components:{
            Page
        },
        data() {
            return {
                input: '',
                tableData: [
                    {
                    releaseNumber:12012102102,
                    releaseTime:"2022-12-12 16:40:42",
                    releaseName: '物业收税点',
                    releasePerson: '王小虎',
                    releaseReviewStatus: '0',
                    releaseReviewer:"小王",
                    releaseType:"生活"
                    }
                ],
                multipleSelection: [],
                //作为初始发送的数据或者接收分页子组件的变化数据，数据最终发送到后端进行分页处理
                pageLine: {
                    page: 1,
                    limit: 5,
                },
                // 分页参数，父组件单项绑定-->指向分页子组件的props:[childMsg]
                pageparm: {
                    currentPage: 1,
                    pageSize: 5,
                    total: 0,
                },
                dialogForm: false,
                form:{}
            }
        },
        methods:{
            //子组件参数变化触发的父组件方法
            callFather(parm) {
                this.pageLine.page = parm.currentPage;
                this.pageLine.limit = parm.pageSize;
                //然后再次调用页面加载的方法(传入pageLine)
            },
            approval(data){
                this.dialogForm = true;
                this.form = data;
            }
        }
  }
</script>